<script setup lang="ts">
defineProps<{
  disabled: boolean
}>()
const emit = defineEmits(['save', 'public'])
function saveArticle() {
  emit('save')
}
function pubilcArticle() {
  emit('public')
}
</script>

<template>
  <div id="menu">
    <section>
      <button :disabled="disabled" tabindex="0" @click="saveArticle">保存</button>
      <button :disabled="disabled" tabindex="0" @click="pubilcArticle">发布</button>
    </section>
  </div>
</template>

<style scoped lang="less">
#menu {
  position: relative;
  width: 100%;
  height: 80px;
  border-radius: var(--radius);

  section {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    gap: 10px;
    > button:active {
      color: var(--color1);
    }
    > button:hover {
      outline: 2px solid var(--color3);
    }
    > button {
      user-select: none;
      cursor: pointer;
      padding: 0 10px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: var(--color2);
      border-radius: var(--radius);
      color: var(--color3);
      border: none;
    }
  }
}
</style>
